import styles from './questionCard.module.scss';
import { Button,Space, Popconfirm,Modal,Tag } from 'antd';
import { EditOutlined,LineChartOutlined,CopyOutlined,DeleteOutlined,StarOutlined, ExclamationCircleFilled } from '@ant-design/icons';
import type { questionType } from '@/utils/type';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';



type Props = {
  item : questionType,
}


const QuestionCard = (props:Props)=>{



  const navigate = useNavigate()

  const handleDelete = () => {
    Modal.confirm({
      title: '确认删除该问卷吗？',
      content: '删除后将无法恢复，请谨慎操作！',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
      icon: <ExclamationCircleFilled/>,
    })
  }

  //编辑
  const handleEdit= ()=>{
    navigate(`/question/edit/${props.item.id}`)
  }

  const handleStat = ()=>{
    navigate(`/question/stat/${props.item.id}`)
  }

  useEffect(()=>{
  },[props])

  return (
    <div className={styles.container}>
      {/* 第一行 */}
      <div className={styles.details}>
        <div className={styles.title}>{props.item.isStar ? <StarOutlined  style={{marginRight:'10px',color:"red"}}/> : ''}{props.item.title}</div>
          <div className={styles.desc}>
           <Space  style={{gap:'15px'}}>
              <div><Tag color={props.item.isPublished ? 'green' : 'blue'}>{props.item.isPublished ? '已发布' : '未发布'}</Tag></div>
              <div>答卷:{props.item.answerCount}</div>
              <div>{props.item.createdAt}</div>
              <div>10:00</div>
           </Space>
          </div>
     
      </div>
      {/* 第二行 */}
      <div className={styles.opt}>
        {/* 左部 */}
        <div className={styles.left}>
         <Space>
          <Button onClick={handleEdit} type='text' icon={<EditOutlined/> }>编辑问卷</Button>
          <Button onClick={handleStat} style={{color:'#aaa'}} type='text' icon={<LineChartOutlined/> }>数据统计</Button>
         </Space>
        </div>
        {/* 右部 */}
        <div className={styles.right}>
          <Space >
            <Button type='text' icon={<StarOutlined/> }>{ props.item.isStar ? '取消标星' : '标星'}</Button>
            <Popconfirm
              title="是否要复制"
              description="Are you sure to copy this question-Survey?"
              onConfirm={()=>alert('delete')}
              okText="确定"
              cancelText="取消"
             >
              <Button type='text' icon={<CopyOutlined/> }>复制</Button>
            </Popconfirm>
            
            <Button onClick={()=>handleDelete()} type='text' icon={<DeleteOutlined/> }>删除</Button>
          </Space> 
        </div>
      </div>
    </div>
  )
}

export default QuestionCard;


